<template>
  <div>
    <my-header-3></my-header-3>
    <div class="i-con">
      <div class="i-nav">
        <a href="">猫眼电影</a> > <span>{{ movieObj.nm }}</span>
      </div>
      <div class="i-context">
        <div class="i-con-img">
          <img :src="movieObj.img" alt="miss" />
        </div>
        <div class="i-con-inner">
          <div class="i-con-cn">
            <h1>{{ movieObj.nm }}</h1>
          </div>
          <div class="i-con-en">{{ movieObj.enm }}</div>
          <div class="i-star">
            <div>演员:{{ movieObj.star }}</div>
            <div>{{ movieObj.cat }}</div>
            <div>{{ movieObj.pubDesc }}</div>
          </div>
          <div class="i-btn">
            <button>想看</button>
            <button>看过</button>
          </div>
        </div>
      </div>
      <div class="i-box">
        <div class="i-box1">
          <span>猫眼购票评分</span>
          <span>{{ movieObj.wish }}人想看</span>
          <span>{{ movieObj.watched }}人看过＞</span>
        </div>
        <div class="i-box2">
          <span
            >{{ movieObj.sc }}
            <div class="i-inbox">{{ movieObj.snum }}人评</div>
          </span>
          <span>模块</span>
          <span>模块</span>
        </div>
      </div>
      <div class="i-context2">
        <div class="i-jianjie1">简介</div>
        <div class="i-jianjie2">{{ movieObj.dra }}</div>
      </div>
      <div class="foot">
        <div></div>
        <div><div class="t1">特惠购票</div></div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader3 from "../components/MyHeader3.vue";
import axios from "axios";
export default {
  name: "MovieItem",
  components: {
    MyHeader3,
  },
  data() {
    return {
      id: "",
      movieObj: {},
    };
  },
  mounted() {
    console.log(this.$route.params);
    this.id = this.$route.params.id;
    axios.get("./json/" + this.id + ".json").then((res) => {
      console.log(res);
      this.movieObj = res.data.data.movie;
      this.movieObj.img = this.movieObj.img.replace("w.h", "100.138");
    });
  },
};
</script>

<style lang="less" scoped>
.i-con {
  background: #19402c;
  width: 100%;
  height: 100vh;
}
.i-nav {
  a {
    color: #ccc;
  }
  font-size: 15px;
  color: #ccc;
  padding-bottom: 10px;
}
.i-context {
  display: flex;
  justify-content: space-around;
  color: #ccc;
}
.i-con-cn {
  color: #fff;
}
.i-jianjie1 {
  font-size: 15px;
  color: #fff;
}
.i-jianjie2 {
  font-size: 15px;
  color: #fff;
}
.i-btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  button {
    width: 2.6667rem;
    height: 0.8533rem;
    background: hsla(0, 0%, 100%, 0.35);
    box-shadow: 0 0.02rem 0.08rem 0 rgb(0 0 0 / 10%);
    border-radius: 0.25rem;
    margin-left: 0.1333rem;
    margin-right: 0.1333rem;
    font-size: 14px;
    color: #fff;
    border: none;
  }
}
.i-box {
  width: 9.3333rem;
  height: 2.1333rem;
  background-color: rgba(0, 0, 0, 0.18);
  border-radius: 0.16rem;
  box-sizing: border-box;
  margin: auto;
  .i-box1 {
    width: 8.88rem;
    height: 0.48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    span {
      width: 30%;
      color: #ccc;
      font-size: 12px;
    }
    span:nth-child(1) {
      font-size: 13px;
      color: #eee;
    }
  }
  .i-box2 {
    width: 8.88rem;
    height: 1.5467rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    span {
      width: 30%;
    }
    span:nth-child(1) {
      font-size: 26px;
      color: #faaf00;
      .i-inbox {
        font-size: 0.24rem;
        color: #ffffff66;
      }
    }
    span:nth-child(2) {
      height: 1.0667rem;
      border: 1px solid #eee;
      margin-right: 0.1333rem;
      padding-top: 10px;
    }
    span:nth-child(3) {
      height: 1.0667rem;
      border: 1px solid goldenrod;
      margin-left: 0.2667rem;
      padding-top: 10px;
      border-radius: 0.16rem;
    }
  }
}
.foot {
  position: fixed;
  width: 100%;
  height: 1.6rem;
  border: 1px solid #ccc;
  margin-top: 52%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  div:nth-child(1) {
    width: 20%;
    height: 1.6rem;
    background: url("/public/001.webp") no-repeat center;
    background-size: cover;
  }
  div:nth-child(2) {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;

    .t1 {
      width: 7.52rem;
      height: 1.1733rem;
      margin: auto;
      background-image: linear-gradient(-90deg, #fb3333, #ff5269);
      box-shadow: 0 0.06rem 0.12rem 0 rgb(251 51 51 / 30%);
      border-radius: 0.5rem;
      font-size: 0.34rem;
      color: #fff;
      text-align: center;
      line-height: 1.0667rem;
      font-size: 18px;
    }
  }
}
</style>